<template>
  <div style="height: 100%;">
    <div style="background: pink; width: 150px;height: 100px; float: right;">
      <span>
        剩余时间：<span style="font-weight: 700; font-size: 20px;">{{ hr }}:{{min}}:{{sec}}</span>
      </span>
    </div>
    <el-card class="box-card">
      <div v-for="(item,index) in questionLists" :key="index">
        <div class="clearfix">
          <span style="font-weight: 700;">{{item.categoryName}}</span>
        </div>
        <div class="text item">
          <span>题目：</span> {{ item.content }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getQuestion } from '@/api';
export default {
  data() {
    return {
      showTime: true,
      day: '',
      hr: '',
      min: '',
      sec: '',
      time: 0,
      questionLists: [],
    };
  },
  mounted() {
    this.endTime = Date.parse(new Date('2021-07-01 17:32:00 ')); // 截止时间为固定值
    this.endTime = Date.parse(new Date()) + 300000; // 截止时间为5分钟（当前时间的五分钟后,1min为60000ms,5min故为300000ms,当前时间的时间戳加上毫秒数）
    this.countdownPay();
    this.questionList();
  },
  methods: {
    countdownPay() {
      const end = this.endTime;
      const now = Date.parse(new Date());
      const msec = end - now;
      this.time = msec;
      if (msec < 0) return;
      let day = parseInt(msec / 1000 / 60 / 60 / 24);
      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
      let min = parseInt((msec / 1000 / 60) % 60);
      let sec = parseInt((msec / 1000) % 60);
      this.day = day;
      this.hr = hr > 9 ? hr : '0' + hr;
      this.min = min > 9 ? min : '0' + min;
      this.sec = sec > 9 ? sec : '0' + sec;
      const that = this;

      if (min >= 0 && sec >= 0) {
        if (min == 0 && sec == 0) {
          that.showTime = false;
          return;
        }
        setTimeout(function () {
          that.countdownPay();
        }, 1000);
      }
    },
    questionList() {
      getQuestion().then((res) => {
        console.log(res);
        this.questionLists = res.data.data;
        this.$store.commit('DATA',res.data.data)
      });
    },
  },
  watch: {
    //监听时间的变化
    time(val) {
      // console.log(val);
      if (val == 0) {
        this.$router.push('readingRules');
      }
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 18px;
}

.item {
  margin-bottom: 18px;
  margin-top: 10px;
}

.box-card {
  width: 520px;
  margin: 100px auto;
}
</style>